<template>
  <div class="step32-container">
    <div class="row">
      <div class="col-label large">优惠方式：</div>
      <div class="col-control">
        <select>
          <option value="1">优惠方式一</option>
          <option value="2">优惠方式二</option>
        </select>
      </div>
      <div class="col-label circle-button-container">
        <button class="circle small hollow">
          <IconPlus color="rgba(183, 183, 204, 1)" />
        </button>
        <button class="circle small hollow">
          <IconSubtract color="rgba(183, 183, 204, 1)" />
        </button>
      </div>
    </div>
    <div class="row">
      <div class="col-label large">贷款类别：</div>
      <div class="col-control">
        <select>
          <option value="1">商业贷款</option>
          <option value="2">公积金贷款</option>
        </select>
      </div>
      <div class="col-label circle-button-container">&nbsp;</div>
    </div>
    <div class="row">
      <div class="col-label large">按揭成数：</div>
      <div class="col-control">
        <select>
          <option value="8">8成</option>
          <option value="7">7成</option>
          <option value="6">6成</option>
        </select>
      </div>
      <div class="col-label circle-button-container">&nbsp;</div>
    </div>
    <div class="row">
      <div class="col-label large">按揭年数：</div>
      <div class="col-control">
        <select>
          <option value="240">20年（240期）</option>
          <option value="360">30年（360期）</option>
        </select>
      </div>
      <div class="col-label circle-button-container">&nbsp;</div>
    </div>
    <div class="row">
      <div class="col-label large">还款方式：</div>
      <div class="col-control radio-control">
        <label for="debx">
          <input id="debx" type="radio" name="reimbursement" value="0" checked />
          等额本息
        </label>
        <label for="debj">
          <input id="debj" type="radio" name="reimbursement" value="1" />
          等额本金
        </label>
      </div>
      <div class="col-label circle-button-container">&nbsp;</div>
    </div>
    <div class="row center">
      <div class="col-control">
        <button class="large" @click="$parent.openCalc()">开始计算</button>
      </div>
    </div>
  </div>
</template>
<script>
import IconPlus from "@/components/IconPlus";
import IconSubtract from "@/components/IconSubtract";

export default {
  components: { IconPlus, IconSubtract }
};
</script>
<style lang="stylus">
.step32-container {
  padding: 93px 0;
  overflow: auto;
  height: calc(100vh - 493px);
  box-sizing: border-box;

  .radio-control {
    display: flex;

    label {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-right: 80px;
    }

    input[type='radio'] {
      height: 70px;
      width: 70px;
      margin-right: 30px;
    }
  }
}
</style>